<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态创建div</title>
<style type="text/css">
	ul{
		border: 1px solid #000;
		position: absolute;
		background: #FFF;
	}
	ul,li{
		display: block;
		width: 200px;
		overflow: hidden;
		list-style: none;
		cursor:pointer;
	}
</style>
<script>
function addcl(x) {
	x.style.background = "blue";
}
function movecl(x) {
	x.style.background = "#FFF";
}
function addv(x) {
	var y = x.parentNode.parentNode.parentNode.getElementsByTagName('input');
	for (var i = 0; i < y.length; i++) {
		y[i].value = x.innerHTML;
	}
	x.parentNode.parentNode.style.display="none";
	x.parentNode.parentNode.innerHTML="";
}
var i = 1;
function addDiv(){
	//创建一个div
	var div = document.createElement('div');
	div.id = 'elem' + i;
	var bo = document.getElementById('main_one');//获取body对象.
	//设置div的属性
	div.innerHTML = bo.innerHTML; //设置显示的数据，可以是标签．
	//动态插入到body中
	document.getElementById('main').appendChild(div);
	i++;
}
function dropDiv(){
    var aaa = document.getElementById('elem'+(i-1));
	document.getElementById('main').removeChild(aaa);
	i--;
 }
function showHint(inp)
{
	var str = inp.value;
	if (str.length==0)
	{ 
		inp.parentNode.lastChild.innerHTML="";
		inp.parentNode.lastChild.style.display="none";
		return;
	}
	if (window.XMLHttpRequest)
	{// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行
		xmlhttp=new XMLHttpRequest();
	}
	else
	{// IE6, IE5 浏览器执行
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			if (inp == document.activeElement) {
				inp.parentNode.lastChild.innerHTML=xmlhttp.responseText;
				inp.parentNode.lastChild.style.display="block";
			}
		}
	}
	xmlhttp.open("GET","gethint.php?q="+str,true);
	xmlhttp.send();
}
</script>
</head>

<body>
<fieldset>
	<legend>用户登录</legend>
	<form>
	<div id="main">
		<div id="main_one">姓名: <input type="text" onkeyup="showHint(this)"><div></div></div>
	</div>
		<input type="button" value="js动态添加div" onclick="addDiv()"/>
		<input type="button" value="js删除添加div" onclick="dropDiv()"/>
	</form>
</fieldset>
</body>
</html>